<template>
    <a-form v-model="editModel" :label-col="labelCol" :span="[7, 17]" >
      <a-row :gutter="8">
        <a-col span="5">
          <div class="u-dtu-left">
            <a-divider dashed plain>服务器配置</a-divider>
            <a-form-item label="IP地址">
              <a-input v-model:value="editModel.ip" />
            </a-form-item>
            <a-form-item label="端口">
              <a-input v-model:value="editModel.port" />
            </a-form-item>
            <a-form-item label="注册包">
              <a-input v-model:value="editModel.register" />
            </a-form-item>
            <a-divider dashed plain>dtu心跳配置</a-divider>
            <a-form-item label="心跳包">
              <a-input v-model:value="editModel.heartbeatMsg" />
            </a-form-item>
            <a-form-item label="心跳间隔(s)">
              <a-input-number v-model:value="editModel.interval" :min="0" :step="1" style="width: 100%"/>
            </a-form-item>
            <a-form-item label="发送心跳">
              <a-radio-group v-model:value="editModel.heartbeat" :options="yesOrNoOptions" />
            </a-form-item>
            <a-divider dashed />
            <div style="text-align: right">
              <ASpace>
                <AButton type="warn">断开</AButton>
                <AButton type="primary">连接</AButton>
              </ASpace>
            </div>
          </div>
        </a-col>
        <a-col span="14">
          <div class="u-dtu-center">
            <a-divider dashed plain orientation="left">接收服务端的网络数据</a-divider>
            <ATextarea :autosize="{minRows: 6}"></ATextarea>
            <a-divider dashed plain orientation="left">接收客户端的网络数据</a-divider>
            <ATextarea :autosize="{minRows: 6}"></ATextarea>
            <ATextarea  :autosize="{minRows: 3}"/>
            <AButton>发送</AButton>
          </div>
        </a-col>
        <a-col span="5">
          <div class="u-dtu-right">
            <a-divider dashed plain>串口配置</a-divider>
            <a-form-item label="串口名">
              <ApiSelect
                :api="getSerialAvailable"
                showSearch
                v-model:value="editModel.serial"
                :filterOption="false"
                labelField="label"
                valueField="value"
              />
            </a-form-item>
            <a-form-item label="波特率">
              <a-select v-model:value="editModel.baudRate" style="width: 100%" :options="baudRateOptions" />
            </a-form-item>
            <a-form-item label="校验位">
              <a-select v-model:value="editModel.parity" style="width: 100%" :options="parityOptions" />
            </a-form-item>
            <a-form-item label="数据位">
              <a-select v-model:value="editModel.dataBits" style="width: 100%" :options="dataBitsOptions" />
            </a-form-item>
            <a-form-item label="停止位">
              <a-select v-model:value="editModel.stopBits" style="width: 100%" :options="stopBitsOptions" />
            </a-form-item>
            <a-form-item label="转发至串口">
              <a-radio-group v-model:value="editModel.toSerial" :options="yesOrNoOptions" />
            </a-form-item>
          </div>
        </a-col>
      </a-row>
    </a-form>
</template>
<!-- DTU模拟器 -->
<script lang="ts" name="iot-device" setup>
  import {ref} from "vue";
  //引入CustomDemo自定义组件
  import { ApiSelect } from '/@/components/Form/index';
  import { getSerialAvailable } from '../../serial/serial.api';

  const labelCol = { span: 6 };

  const editModel = ref({
    ip: '127.0.0.1',
    port: '7078',
    register: '123456',
    heartbeatMsg: '123456',
    interval: '60',
    heartbeat: true,
    serial: '',
    baudRate: '9600',
    parity: '2',
    dataBits: '8',
    stopBits: '1',
    toSerial: true
  });

  const yesOrNoOptions = ref([
    {label: "是", value: true},
    {label: "否", value: false},
  ]);

  const baudRateOptions = ref([
    {label: "2400", value: 2400},
    {label: "4800", value: 4800},
    {label: "9600", value: 9600},
    {label: "19200", value: 19200},
    {label: "38400", value: 38400},
    {label: "43000", value: 43000},
    {label: "56000", value: 56000},
    {label: "57600", value: 57600},
    {label: "115200", value: 115200},
  ]);

  const parityOptions = ref([
    {label: 'None', value: 0},
    {label: 'Od', value: 1},
    {label: 'Even', value: 2},
    {label: 'Mark', value: 3},
    {label: 'Space', value: 4},
  ]);

  const dataBitsOptions = ref([
    {label: '5', value: 5},
    {label: '6', value: 6},
    {label: '7', value: 7},
    {label: '8', value: 8},
  ]);

  const stopBitsOptions = ref([
    {label: '1', value: 1},
    {label: '1.5', value: 2},
    {label: '2', value: 3},
  ]);

</script>

<style scoped>
.u-dtu-left,.u-dtu-right{
  padding: 8px;
  background: #ffffff;
}
</style>
